<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>彩贝导航</title>
		<style>
			*{
				margin: 0;
				padding:0;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
				color: black;
			}
			#nav{
				width:950px;
				height: 90px;
				line-height: 100px;
				background-color: aliceblue;
			}
			#nav{
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
			}
			#nav #logo{ 
				 
			}
			#nav #logo img{
				margin-top:20px; 
			}
			#nav ul.caidan{
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				 
			}
			#nav ul.caidan>li{
				margin-left: 10px;
				position: relative;
			}
			#nav ul.caidan li.shop span.k{
				position: absolute;
				top:15px;
				left:0;
				width: 38px;
				height: 23px;
				background: url(image/header_03.png) no-repeat;
				overflow: hidden;
			}
			/*动画*/
			@keyframes d{
				from{
					width: 0px;
				}
				10%{
					width: 20px;
				}
				20%{
					width: 40px;
				}
				40%{
					width: 50px;
				}
				70%{
					width: 60px;
				} 
				to{
					width: 66px;
				}
			}
			#nav ul.caidan li.shop:hover span.k{
				background-image: url(image/header_05.png);
				animation: d 1s 1 forwards;
				
			}
			#nav ul.caidan li a{
				border-right: 2px solid gray;
				padding-right: 15px;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<div id="logo">
				<img src="image/logo_170x46.png"/>
			</div>
			<ul class="caidan">
				<li class="shop"><a href="#">返回商城</a>
				 <span class="k"></span>
				</li>
				<li><a href="#">商旅频道</a></li>
				<li><a href="#">积分商城</a></li>
				<li><a href="#">商旅频道</a></li>
				<li><a href="#">了解彩贝</a></li>
				<li><a href="#">彩贝活动</a></li>
				<li><a href="#" style="border: none;">个人中心</a></li>
			</ul>
			<div>
				<a href="#"><img src="image/iconsB_11.gif"/></a>
				<a href="#"><img src="image/iconsB_12.gif"/></a>
				<a href="#"><img src="image/iconsB_13.png"/></a>
			</div>
		</div>
	</body>
</html>